<template>
	<div :class="bedClass">
		<span v-if="isAddType">+</span>
		<div class="pillow" v-else>
			<div :class="pillowClass"></div>
			<div :class="pillowClass" v-if="type === 'double'"></div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "cc-bed-item",
		props: {
			item: Object,
			type: {
				type: String,
				default: "single"
			}
		},
		computed: {
			bedClass() {
				return ["cc-bed-item", this.isAddType ? "add" : ""];
			},
			pillowClass() {
				return [
					"pillow-item",
					this.type === "double" ? "double" : "single"
				];
			},
			isAddType() {
				return this.type === "add";
			}
		},
		created() {
			this.bed = this.item || {};
		},
		data() {
			return {};
		}
	};
</script>

<style lang="less" scoped>
	.cc-bed-item {
		display: flex;
		border-top: 1px solid #036;
		border-right: 1px solid #036;
		border-bottom: 1px solid #036;
		border-left: none;
		margin: 20px 0;
		width: 45%;
		height: 100px;
		background-color: #eee;
		cursor: pointer;

		&.cc-bed-item.add {
			line-height: 100px;
			text-align: center;
			font-size: 64px;

			span {
				width: 100%;
			}
		}

		.pillow {
			width: 15%;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.pillow-item {
				flex: 1;
				width: 100%;
				max-height: 50px;
				border-right: 1px solid #036;
				background-color: #ccc;

				&.single {
					border-top: 1px solid #036;
					border-bottom: 1px solid #036;
				}

				+ .pillow-item.double {
					border-top: 1px solid #036;
				}
			}
		}
	}
</style>
